<template>
   <div class="box">
     <div class="rankingList-top">
       <div class="rankingList-top_item">
         <img src="../assets/login-register/cancel.png" @click="Return" class="rankingList-top_img" alt="">
       </div>
       <div class="rankingList-top_item rankingList-top_center">关注</div>
       <div class="rankingList-top_item">
         <img src="../assets/icon/menu.png" class="rankingList-top_img2" alt="">
       </div>
     </div>

     <div class="main">
          <div class="Concerned-people" v-for="item in dynamicList">
              <div class="portrait-left">
                <img :src="item.avatarUrl" alt="" @click="$router.push({ name: 'JokerXue', query:{ userId : item.userId }})">
              </div>
              <div class="name-right">
                <div class="ppp">
                  <p class="name">{{item.nickname}}</p>
                  <p class="personalized">{{item.signature}}</p>
                </div>
              </div>
            <span class="more">
              <img src="../assets/Myconcern/myconcern_female.png" alt="">
            </span>
          </div>
     </div>

     <v-footer></v-footer>

   </div>
</template>

<script>
  import footer from "@/components/footer/"
     export default {
          name: "follow",
       data(){
            return{
              id : this.$storage.get('user').account.id,
              dynamicList: [],
            }
       },
       methods: {
         Return() {
           this.$router.back(-1);
         },
       },
       created() {
  /*       console.log(this.$storage.get('user'));*/
         this.$http.get(`/api/user/follows?uid=${this.id}`).then((res) => {
           console.log(res);
           this.dynamicList = res.data.follow;
         });
       },
       components: {
         'v-footer': footer,
       },
     }
</script>

<style scoped>
  .box{
    width: 100vw;
    margin-bottom: 100px;
  }
  .rankingList-top{
    width: 100vw;
    height: 50px;
    background: #C64B3D;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #fffdef;
    position: fixed;
    z-index: 10;

  }
  .rankingList-top_item{
    width: 33vw;
    height: 50px;
    float: left;
  }
  .rankingList-top_img{
    width: 12px;
    display: block;
    margin-top: 15px;
    margin-left: 15px;
  }
  .rankingList-top_img2{
    width: 18px;
    display: block;
    margin-top: 18px;
    margin-left: 90px;
  }

  .main{
     width: 100vw;
     padding-top: 50px;
    box-sizing: border-box;
  }
  .Concerned-people{
    width: 100vw;
    height: 70px;
    position: relative;
  }
  .portrait-left{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    float: left;
    margin-top: 8px;
    margin-left: 8px;
    overflow: hidden;
  }
  .portrait-left img{
      width: inherit;
      height: inherit;
    }

  .name-right{
    width: 302px;
    height: 70px;
    float: left;
    margin-left: 10px;
    border-bottom: 1px solid #ebeced;
    position: relative;
    display: flex;
    align-items:center;
  }
  .ppp{
    width: 250px;
  }

  .name{
    font-size: 16px;
  }
  .personalized{
    font-size: 13px;
    color: #ADADAE;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .more{
    width: 25px;
    height: 18px;
    display: block;
    position: absolute;
    top: 25px;
    right: 10px;

  }
  .more img{
    display: block;
    width: 20px;
    margin-top: 7px;
  }


</style>
